Page({
  data: {
    formula_html: '<p>加载中...</p>',
    formula_id: null,
    uploading: false,  // 上传状态标识
    userImagePath: '',  // 用户上传的图片路径
    uploadStatus: '',   // 上传状态: 'uploading', 'success', 'failed'
    currentFormulaText: '',  // 当前公式的文本内容（用于显示）
    formulaLoading: true,  // 公式加载状态
    formulaError: false,   // 公式加载错误状态
    uploadProgress: 0,     // 上传进度
    networkConnected: true, // 网络连接状态
    retryCount: 0,         // 重试次数
    maxRetries: 3,         // 最大重试次数
    showFormulaModal: false, // 公式放大模态框显示状态
    formulaEnlarged: false   // 公式是否已放大
  },

  onLoad: function (options) {
    // 从全局配置获取API地址
    const app = getApp();
    let apiUrl = app.globalData.apiBaseUrl;

    // 如果全局配置还没初始化，使用本地方法获取
    if (!apiUrl) {
      apiUrl = this.getApiBaseUrl();
    }

    this.setData({
      apiBaseUrl: apiUrl
    });

    console.log('使用API地址:', apiUrl);

    // 显示API地址提示
    tt.showToast({
      title: `连接到: ${apiUrl.includes('127.0.0.1') ? '本地服务器' : '网络服务器'}`,
      icon: 'none',
      duration: 2000
    });

    // 检查网络状态
    this.checkNetworkStatus();
    // 获取第一个公式
    this.fetchFormula();
  },

  onShow: function () {
    // 页面显示时检查网络状态
    this.checkNetworkStatus();
  },

  /**
   * 获取API基础URL
   * 在开发环境使用localhost，在真机环境使用实际IP
   */
  getApiBaseUrl: function() {
    try {
      // 获取系统信息来判断是否为真机环境
      const systemInfo = tt.getSystemInfoSync();
      const isSimulator = systemInfo.platform === 'devtools';

      console.log('系统信息:', {
        platform: systemInfo.platform,
        isSimulator: isSimulator
      });

      if (isSimulator) {
        // 开发环境使用localhost
        console.log('使用开发环境API地址');
        return 'http://127.0.0.1:8080';
      } else {
        // 真机环境需要使用开发机器的实际IP地址
        // 请将下面的IP地址替换为您的开发机器的实际IP地址
        console.log('使用真机环境API地址');
        return 'http://10.12.173.82:8080';  // 使用实际检测到的IP
      }
    } catch (error) {
      console.error('获取系统信息失败:', error);
      // 默认使用localhost
      return 'http://127.0.0.1:8000';
    }
  },

  /**
   * 将LaTeX公式转换为可显示的HTML
   * 使用简单的符号替换进行客户端渲染
   */
  renderLatexToHtml: function(latex) {
    try {
      // 简单的LaTeX到HTML转换
      let html = latex;

      // 处理常见的LaTeX符号
      html = html.replace(/\\frac\{([^}]+)\}\{([^}]+)\}/g, '<span class="fraction"><span class="numerator">$1</span><span class="denominator">$2</span></span>');
      html = html.replace(/\^(\w+)/g, '<sup>$1</sup>');
      html = html.replace(/_(\w+)/g, '<sub>$1</sub>');
      html = html.replace(/\\sqrt\{([^}]+)\}/g, '√($1)');
      html = html.replace(/\\int/g, '∫');
      html = html.replace(/\\sum/g, '∑');
      html = html.replace(/\\prod/g, '∏');
      html = html.replace(/\\alpha/g, 'α');
      html = html.replace(/\\beta/g, 'β');
      html = html.replace(/\\gamma/g, 'γ');
      html = html.replace(/\\delta/g, 'δ');
      html = html.replace(/\\theta/g, 'θ');
      html = html.replace(/\\pi/g, 'π');
      html = html.replace(/\\sigma/g, 'σ');
      html = html.replace(/\\omega/g, 'ω');
      html = html.replace(/\\infty/g, '∞');
      html = html.replace(/\\sin/g, 'sin');
      html = html.replace(/\\cos/g, 'cos');
      html = html.replace(/\\tan/g, 'tan');
      html = html.replace(/\\log/g, 'log');
      html = html.replace(/\\ln/g, 'ln');
      html = html.replace(/\\cdot/g, '·');
      html = html.replace(/\\times/g, '×');
      html = html.replace(/\\div/g, '÷');
      html = html.replace(/\\pm/g, '±');
      html = html.replace(/\\leq/g, '≤');
      html = html.replace(/\\geq/g, '≥');
      html = html.replace(/\\neq/g, '≠');
      html = html.replace(/\\approx/g, '≈');

      // 包装在数学公式样式中
      return `<div class="math-formula">${html}</div>`;
    } catch (error) {
      console.error('LaTeX渲染错误:', error);
      return `<div class="math-formula">${latex}</div>`;
    }
  },

  /**
   * 获取随机公式
   * 从后端API获取一个随机公式并显示在页面上
   */
  fetchFormula: function () {
    const that = this;

    // 设置加载状态
    this.setData({
      formulaLoading: true,
      formulaError: false,
      retryCount: 0
    });

    // 检查网络状态
    if (!this.data.networkConnected) {
      this.setData({
        formulaLoading: false,
        formulaError: true
      });
      tt.showToast({
        title: '网络连接异常',
        icon: 'none'
      });
      return;
    }

    tt.request({
      url: `${this.data.apiBaseUrl}/api/v1/formulas/random`,
      method: 'GET',
      timeout: 10000,  // 10秒超时
      success(res) {
        if (res.statusCode === 200 && res.data) {
          // 将LaTeX转换为可显示的HTML
          const htmlContent = that.renderLatexToHtml(res.data.latex);
          that.setData({
            formula_html: htmlContent,
            formula_id: res.data.id,
            currentFormulaText: res.data.latex,
            formulaLoading: false,
            formulaError: false,
            retryCount: 0
          });
          console.log('获取公式成功:', res.data);

          // 显示成功提示
          tt.showToast({
            title: '公式加载成功',
            icon: 'success',
            duration: 1500
          });
        } else {
          throw new Error('服务器返回数据格式错误');
        }
      },
      fail(res) {
        console.log('获取公式失败:', res);
        that.setData({
          formulaLoading: false,
          formulaError: true
        });

        // 根据错误类型显示不同提示
        let errorMessage = '获取公式失败';
        if (res.errMsg && res.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请检查网络';
        } else if (res.errMsg && res.errMsg.includes('fail')) {
          errorMessage = '网络连接失败';
        }

        tt.showToast({
          title: errorMessage,
          icon: 'none',
          duration: 2000
        });

        // 自动重试机制
        if (that.data.retryCount < that.data.maxRetries) {
          setTimeout(() => {
            that.retryFetchFormula();
          }, 2000);
        }
      }
    });
  },

  /**
   * 重试获取公式
   */
  retryFetchFormula: function () {
    const retryCount = this.data.retryCount + 1;
    this.setData({ retryCount });

    console.log(`重试获取公式，第 ${retryCount} 次`);
    tt.showToast({
      title: `重试中... (${retryCount}/${this.data.maxRetries})`,
      icon: 'loading',
      duration: 1000
    });

    this.fetchFormula();
  },

  /**
   * 拍照上传功能
   * 调用飞书小程序相机API拍照，然后上传到后端
   */
  uploadImage: function () {
    const that = this;

    // 检查是否有当前公式ID
    if (!this.data.formula_id) {
      tt.showToast({
        title: '请先获取公式',
        icon: 'none'
      });
      return;
    }

    // 防止重复上传
    if (this.data.uploading) {
      tt.showToast({
        title: '正在上传中...',
        icon: 'none'
      });
      return;
    }

    // 调用飞书小程序相机API
    tt.chooseImage({
      count: 1,  // 只允许选择一张图片
      sizeType: ['compressed'],  // 使用压缩图片
      sourceType: ['camera', 'album'],  // 允许拍照或从相册选择
      success(res) {
        const tempFilePaths = res.tempFilePaths;
        if (tempFilePaths && tempFilePaths.length > 0) {
          // 立即显示选择的图片
          that.setData({
            userImagePath: tempFilePaths[0],
            uploadStatus: 'uploading'
          });

          // 开始上传图片
          that.uploadToServer(tempFilePaths[0]);
        }
      },
      fail(res) {
        console.log('选择图片失败:', res);
        tt.showToast({
          title: '选择图片失败',
          icon: 'none'
        });
      }
    });
  },

  /**
   * 上传图片到服务器
   * @param {string} filePath - 图片文件路径
   */
  uploadToServer: function (filePath) {
    const that = this;

    // 检查网络状态
    if (!this.data.networkConnected) {
      tt.showToast({
        title: '网络连接异常，无法上传',
        icon: 'none'
      });
      this.setData({
        uploadStatus: 'failed'
      });
      return;
    }

    // 设置上传状态
    this.setData({
      uploading: true,
      uploadProgress: 0,
      uploadStatus: 'uploading'
    });

    // 模拟上传进度
    const progressTimer = setInterval(() => {
      const currentProgress = that.data.uploadProgress;
      if (currentProgress < 90) {
        that.setData({
          uploadProgress: currentProgress + Math.random() * 20
        });
      }
    }, 200);

    // 使用飞书小程序文件上传API
    const uploadTask = tt.uploadFile({
      url: `${this.data.apiBaseUrl}/api/v1/submissions/`,
      filePath: filePath,
      name: 'image',  // 后端接收的字段名
      formData: {
        'formula_id': this.data.formula_id  // 当前公式ID
      },
      success(res) {
        console.log('上传成功:', res);
        clearInterval(progressTimer);

        // 完成进度条
        that.setData({
          uploadProgress: 100
        });

        try {
          const data = JSON.parse(res.data);
          if (data.success) {
            // 更新上传状态为成功
            that.setData({
              uploadStatus: 'success'
            });

            // 上传成功，显示成功提示
            tt.showToast({
              title: '上传成功！',
              icon: 'success',
              duration: 2000
            });

            // 延迟自动切换到下一题（同时清除当前图片）
            setTimeout(() => {
              that.setData({
                userImagePath: '',
                uploadStatus: '',
                currentFormulaText: '',
                uploadProgress: 0
              });
              that.fetchFormula();
            }, 3000);  // 延长到3秒，让用户看到成功状态
          } else {
            throw new Error('服务器返回失败');
          }
        } catch (error) {
          console.log('解析响应失败:', error);
          // 更新上传状态为失败
          that.setData({
            uploadStatus: 'failed',
            uploadProgress: 0
          });
          tt.showToast({
            title: '上传失败，请重试',
            icon: 'none'
          });
        }
      },
      fail(res) {
        console.log('上传失败:', res);
        clearInterval(progressTimer);

        // 更新上传状态为失败
        that.setData({
          uploadStatus: 'failed',
          uploadProgress: 0
        });

        // 根据错误类型显示不同提示
        let errorMessage = '上传失败，请重试';
        if (res.errMsg && res.errMsg.includes('timeout')) {
          errorMessage = '上传超时，请检查网络';
        } else if (res.errMsg && res.errMsg.includes('fail')) {
          errorMessage = '网络连接失败';
        }

        tt.showToast({
          title: errorMessage,
          icon: 'none',
          duration: 2000
        });
      },
      complete() {
        // 重置上传状态
        that.setData({
          uploading: false
        });
        clearInterval(progressTimer);
      }
    });
  },

  /**
   * 预览用户图片
   * 点击图片时放大预览
   */
  previewUserImage: function () {
    if (this.data.userImagePath) {
      tt.previewImage({
        urls: [this.data.userImagePath],
        current: this.data.userImagePath
      });
    }
  },

  /**
   * 清除用户图片
   * 手动清除当前显示的图片
   */
  clearUserImage: function () {
    const that = this;
    tt.showModal({
      title: '确认清除',
      content: '确定要清除当前图片吗？',
      success(res) {
        if (res.confirm) {
          that.setData({
            userImagePath: '',
            uploadStatus: '',
            uploadProgress: 0,
            currentFormulaText: that.data.currentFormulaText  // 保持当前公式文本
          });
          tt.showToast({
            title: '图片已清除',
            icon: 'success'
          });
        }
      }
    });
  },

  /**
   * 检查网络状态
   */
  checkNetworkStatus: function () {
    const that = this;
    tt.getNetworkType({
      success(res) {
        const isConnected = res.networkType !== 'none';
        that.setData({
          networkConnected: isConnected
        });

        if (!isConnected) {
          tt.showToast({
            title: '网络连接异常',
            icon: 'none'
          });
        }
      },
      fail() {
        that.setData({
          networkConnected: false
        });
      }
    });
  },

  /**
   * 重新检测网络
   */
  checkNetwork: function () {
    tt.showLoading({
      title: '检测中...'
    });

    setTimeout(() => {
      this.checkNetworkStatus();
      tt.hideLoading();

      if (this.data.networkConnected) {
        tt.showToast({
          title: '网络连接正常',
          icon: 'success'
        });
      }
    }, 1000);
  },

  /**
   * 重试上传
   */
  retryUpload: function () {
    if (this.data.userImagePath) {
      this.uploadToServer(this.data.userImagePath);
    } else {
      this.uploadImage();
    }
  },

  /**
   * 图片加载成功
   */
  onImageLoad: function () {
    console.log('图片加载成功');
  },

  /**
   * 图片加载失败
   */
  onImageError: function () {
    console.log('图片加载失败');
    this.setData({
      uploadStatus: 'failed'
    });
  },

  /**
   * 显示帮助信息
   */
  showHelp: function () {
    tt.showModal({
      title: '使用帮助',
      content: '1. 点击"切换公式"获取新的数学公式\n2. 在纸上手写抄录公式\n3. 点击"拍照上传"拍摄手写图片\n4. 等待上传完成后自动切换下一题\n\n提示：确保网络连接正常，图片清晰可见',
      showCancel: false,
      confirmText: '知道了'
    });
  },

  /**
   * 放大显示公式
   */
  enlargeFormula: function() {
    if (!this.data.currentFormulaText) {
      tt.showToast({
        title: '暂无公式可显示',
        icon: 'none'
      });
      return;
    }

    this.setData({
      showFormulaModal: true,
      formulaEnlarged: true
    });

    // 添加触觉反馈
    tt.vibrateShort();
  },

  /**
   * 关闭公式放大模态框
   */
  closeFormulaModal: function() {
    this.setData({
      showFormulaModal: false,
      formulaEnlarged: false
    });
  },

  /**
   * 阻止事件冒泡
   */
  stopPropagation: function() {
    // 阻止点击模态框内容时关闭模态框
  },

  /**
   * 复制公式LaTeX代码
   */
  copyFormula: function() {
    if (!this.data.currentFormulaText) {
      tt.showToast({
        title: '暂无公式可复制',
        icon: 'none'
      });
      return;
    }

    // 飞书小程序复制到剪贴板
    tt.setClipboardData({
      data: this.data.currentFormulaText,
      success: () => {
        tt.showToast({
          title: '公式已复制到剪贴板',
          icon: 'success',
          duration: 2000
        });

        // 添加触觉反馈
        tt.vibrateShort();

        // 如果是在模态框中复制，关闭模态框
        if (this.data.showFormulaModal) {
          setTimeout(() => {
            this.closeFormulaModal();
          }, 1000);
        }
      },
      fail: () => {
        tt.showToast({
          title: '复制失败',
          icon: 'none'
        });
      }
    });
  },

  /**
   * 刷新公式（重新获取）
   */
  refreshFormula: function() {
    // 添加触觉反馈
    tt.vibrateShort();

    // 显示刷新提示
    tt.showToast({
      title: '正在刷新公式...',
      icon: 'loading',
      duration: 1000
    });

    // 延迟一下再获取新公式，让用户看到刷新效果
    setTimeout(() => {
      this.fetchFormula();
    }, 500);
  }
});
